<template>
  <div class="jieda-nav">
    <swiper :options = "swiperJD" ref="mySwiperJD">
      <swiper-slide :class="{active:slidesNavIndex===index}" v-for="(item,index) in slidesNav" :key="index">{{item}}</swiper-slide>
    </swiper>
    <div class="scroll-line" :style="{left:slideLineL+20+'px', width:slideLineW-20+'px', opacity:slideLineO}">
      <div class="scroll-line-move"></div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import loading from '../components/Loading.vue'
export default {
  data() {
    return {
      list: '',
      choosenSex: '',
      slidesNavIndex: 0,
      slideLineO: 0,
      slideLineW: '',
      slideLineL: '',
      slidesNav: ['全部解答', '基因检测', '孕期', '用药', '常见疾病', '疫苗', '辅食', '育儿'],
      swiperJD: {
        slidesPerView: 'auto',
        freeMode: true,
        // initialSlide :1,
        // centeredSlides: true,
        resistanceRatio: 0, // 禁止边缘抵抗
        touchAction: 'none',
        on: {
          tap: e => {
            this.jieDaLists = ''
            this.loadingShow = true
            this.noDataShow = false
            this.slidesNavIndex = this.mySwiperJD.clickedIndex
            this.slideLineO = 1
            this.mySwiperJD.slideTo(this.mySwiperJD.clickedIndex - 2, 500, false)
            this.slideLineW = e.target.offsetWidth
            this.slideLineL = e.target.offsetLeft + this.mySwiperJD.translate
            setTimeout(() => {
              this.slideLineO = 0
            }, 350)
            this.$bus.$emit('jieDaNavIndex', this.mySwiperJD.clickedIndex)
          }
        }
      }
    }
  },
  name: 'needs',
  components: {
    loading
  },
  computed: {
    mySwiperJD() {
      return this.$refs.mySwiperJD.swiper
    }
  },
  methods: {
    checkAll() {
      this.$router.push('/answer')
    }
  },
  created() {
    this.$bus.$on('setNavIndex', data => {
      console.log(data)
      this.slidesNavIndex = data
      this.mySwiperJD.slideTo(data, 500, false)
    })
  },
  mounted() {
    this.slidesNavIndex = 0
  }
}
</script>
<style lang="scss" scoped>
.jieda-nav {
  background: #fff;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 999;
  .swiper-container {
    width: 100%;
    line-height: r(38);
    height: r(38);
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .swiper-slide {
      width: auto;
      font-size: r(14);
      padding-left: r(10);
      padding-right: r(10);
      color: #999;
      box-sizing: border-box;
      position: relative;
      &.active {
        color: #6dbbfe;
        &::after {
          width: calc(100% - 20px);
          height: 2px;
          content: '';
          display: block;
          float: left;
          position: absolute;
          bottom: 0;
          background: #6dbbfe;
        }
      }
    }
  }
  .scroll-line {
    height: 2px;
    background: #6dbbfe;
    position: absolute;
    width: 50px;
    left: 20px;
    z-index: 66;
    bottom: 1px;
    transition: 0.35s ease;
  }
}
.qestion-list {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
  border-bottom: #f7f7f7 10px solid;
  .i-lists {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #eee;
    .swiper-container {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: auto;
        color: #999;
        font-size: 16px;
        margin-left: 16px;
        margin-right: 16px;
        box-sizing: border-box;
        border-bottom: 2px solid #fff;
        &.active {
          color: #6dbbfe;
          border-bottom: 2px solid #6dbbfe;
        }
      }
    }
  }
  ul {
    width: 100%;
    display: block;
    overflow: hidden;
    li {
      width: 100%;
      display: block;
      float: left;
      padding-top: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
      h6 {
        font-size: 16px;
        color: #2f2f2f;
        line-height: 25px;
        margin-bottom: 12px;
        margin-top: 12px;
        a {
          color: #2f2f2f;
        }
      }
      .answer-detail {
        font-size: 12px;
        color: #999999;
        line-height: 22px;
      }
      .answer-audio {
        width: 219px;
        height: 36px;
        line-height: 36px;
        border-radius: 200px;
        background: #6dbbfe;
        margin-top: 12px;
        font-size: 14px;
        float: left;
        text-align: center;
        color: #fff;
        span {
          float: left;
          width: 40px;
          font-size: 18px;
        }
        p {
          width: 129px;
          float: left;
          color: #fff;
        }
        i {
          width: 50px;
          float: left;
        }
      }
      .answer-msg {
        width: 100%;
        float: left;
        margin-top: 24px;
        overflow: hidden;
        margin-bottom: 3px;
        .touxiang {
          width: 16px;
          height: 16px;
          border-radius: 50px;
          overflow: hidden;
          float: left;
          margin-right: 6px;
          img {
            width: 100%;
          }
        }
        .name,
        .address,
        .state {
          display: block;
          float: left;
          margin-top: 3px;
          font-size: 11px;
        }
        .name {
          color: #666;
          margin-right: 6px;
          a {
            color: #666;
          }
        }
        .address {
          color: #ccc;
        }
        .state {
          color: #6dbbfe;
          float: right;
          a {
            color: #6dbbfe;
          }
        }
      }
    }
  }
  .check-all {
    width: 100%;
    text-align: center;
    font-size: r(16);
    line-height: r(48);
    border: none;
    background: none;
    outline: none;
  }
  .no-data-show {
    width: 100%;
    height: 200px;
    img {
      width: 140px;
    }
  }
}
.qestion-list-last {
  border-bottom: none;
}
</style>
